<template>
    <div>
        <h2 style="color: gray;">详情用户</h2>
        <el-divider></el-divider>

        <!-- 详情 -->
        <template v-if="details[0]">
            <el-button type="primary"  @click="$router.push(`/htlogin/userlist`)" plain>返回</el-button>
            <br>
            <br>
            <el-descriptions title="用户信息">
                <el-descriptions-item label="用户编号">{{details[0].user_id}}</el-descriptions-item>
                <el-descriptions-item label="头像">
                    <div class="demo-basic--circle" v-show="!details[0]">
                        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                    </div>
                    <div class="demo-basic--circle" v-show="details[0]" v-if="imgnone">
                        <div class="block"><el-avatar :size="50" :src="'http://localhost:3010/images/'+details[0].portrait"></el-avatar></div>
                    </div>
                    <div class="demo-basic--circle" v-else>
                        <div class="block"><el-avatar :size="50" :src="details[0].portrait"></el-avatar></div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{details[0].nickname}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{details[0].phone}}</el-descriptions-item>
                <el-descriptions-item label="密码">{{details[0].upwd}}</el-descriptions-item>
                <el-descriptions-item label="积分">{{details[0].integral}}</el-descriptions-item>
                <template>
                    <el-descriptions-item label="性别" v-if="details[0].gender">{{details[0].gender}}</el-descriptions-item>
                    <el-descriptions-item label="性别" v-else>无</el-descriptions-item>
                </template>
                <template>
                    <el-descriptions-item label="居住地" v-if="details[0].region">{{details[0].region}}</el-descriptions-item>
                    <el-descriptions-item label="居住地" v-else>无</el-descriptions-item>
                </template>
                <template>
                    <el-descriptions-item label="生日" v-if="details[0].birthday">{{details[0].birthday}}</el-descriptions-item>
                    <el-descriptions-item label="生日" v-else>无</el-descriptions-item>
                </template>
            </el-descriptions>
            
        </template>
        <template v-else>
            <el-empty>
                <el-button type="primary"  @click="$router.push(`/htlogin/userlist`)" plain>返回</el-button>
            </el-empty>
        </template>
        
        <!-- 操作 -->
        <el-button-group>
            <el-button type="primary"  icon="el-icon-arrow-left" @click="upper" :disabled="uppernone">上一个</el-button>
            <el-button type="primary" @click="lower" :disabled="lowernone" >下一个<i class="el-icon-arrow-right el-icon--right"  ></i></el-button>
        </el-button-group>
        
    </div>
</template>

<script>
import httpApi from '@/http';

    export default {
        data(){
            return{
                details:[],
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                uppernone : false,
                lowernone : false,
                // 获取参数id，加载当前选中的用户的详细信息（发请求）
                id:this.$route.params.id,
                imgnone:true

            }
        },
        methods:{
            detailslist(){
                // console.log("id:",id);
                httpApi.UserApi.queryDetailsUser({user_id:this.id}).then(res =>{
                    console.log("详情",res);
                    this.details = res.data.data
                    if(this.details[0].portrait == /^(http[^"]*)"/){
                        imgnone = false
                    }
                    // console.log(this.details);
                })

            },
            upper(){
                if(this.id === 1){
                    this.uppernone = true
                }else {
                   this.id--
                   this.detailslist() 
                   
                }
                
            },
            lower(){
                if(this.details.length == 0){
                    this.lowernone = true
                }else{
                   this.id++ 
                   this.uppernone = false
                   this.lowernone = false
                   this.detailslist()
                }   
            }
        },
        mounted(){
            this.detailslist()
        }
    }
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__content{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}
</style>